<template>
<div>
  <!--  面包屑导航区域 -->
  <br>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item >首页</el-breadcrumb-item>
    <el-breadcrumb-item>退货</el-breadcrumb-item>
  </el-breadcrumb>


  <!--  卡片视图区域-->
  <el-card >
    <!--搜索与添加区域-->
    <el-row :gutter="30">
      <el-col :span="8">
        <el-input v-model="cinSequenceNo"
                  placeholder="请输入购物清单编号">
        </el-input>
      </el-col>
      <el-col :span="8">
        <el-input placeholder="请输入商品编号"
                  v-model="cinItemBarcode"
                  ref="clickPosition">
          <el-button slot="append" icon="el-icon-search"
                     @click="getItemMsg"></el-button>
        </el-input>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getPriceMsg" >退货</el-button>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="35%" >
          <!--            内容主题区域-->
          <span>退货成功</span>
          <!--            底部区域-->
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" @click="clearItem">清空退货清单</el-button>
      </el-col>
    </el-row>
    <!--  商品清单页面区域  -->
    <el-table :data="this.itemList" border stripe height="450">
      <el-table-column type="index"></el-table-column>
      <el-table-column label="条码" prop="itemBarcode"></el-table-column>
      <el-table-column label="退货数量" prop="quantity"></el-table-column>
      <el-table-column label="操作" prop="quantity" width="400px">
        <template slot-scope="scope">
          <el-input-number
            v-model="scope.row.quantity" controls-position="right"
            @change="handleChange" :min="0.001" :max="scope.row.stockquantity">
          </el-input-number>
          <el-button type="danger" icon="el-icon-delete" circle
                     @click="removeParams(scope.row.itemBarcode)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>

</div>
</template>

<script>
export default {
  name: 'RefundCash',
  data () {
    return {
      cinItemBarcode: '',
      cinSequenceNo: '',
      itemList: [],
      total: 0,
      initialflag: 0,
      totalPrice: 0,
      dialogVisible: false,//小票对话框默认关闭
    }
  },
  methods: {
    //获取商品信息
    getItemMsg () {
      let checkflag = 0
      if (this.total !== 0) {
        for (let tempbar = 0; tempbar < this.total; tempbar++) {
          let ij = this.itemList[tempbar].itemBarcode
          if (ij == this.cinItemBarcode) {
            this.itemList[tempbar].quantity++
            checkflag = 1
            this.newPage()
            return this.$message.warning('该商品已存在，已添加数量！')
          }
        }
      }
      //退货单中没有，进行添加
      if (checkflag == 0) {
        if(!this.cinSequenceNo)
          return this.$message.error('添加失败，请输入清单编号！')
        this.total++
        //信息加入
        let queryInfo = {
          sequenceNo: this.cinSequenceNo,
          itemBarcode: this.cinItemBarcode,
          quantity: 1,
        }
        //this.itemList=this.itemList.concat(queryInfo)
        this.itemList.unshift(...[queryInfo])
        console.log(this.itemList)
        this.newPage()
        return this.$message.success('添加成功！')
      }
    },
    //删除某一项商品
    removeParams (itemBarcode) {
      for (let i = 0; i < this.total; i++) {
        if (this.itemList[i].itemBarcode == itemBarcode) {
          this.itemList.splice(i, 1)
          this.total--
          this.newPage()
          return this.$message.success('删除成功')
        }
      }
    },
    //结账功能
    async getPriceMsg () {
      let refundMsg = []
      this.itemList.forEach(function(value, index) {
        let tempMsg = {
          sequenceNo: value.sequenceNo,
          itemBarcode: value.itemBarcode,
          quantity: value.quantity
        }
        refundMsg = refundMsg.concat(tempMsg)
      })
      console.log(refundMsg)
      const { data: res } =
        await this.$http.post('/refund', refundMsg)
      if (res.code == 10401) {
        await this.$router.push('/login')
        window.sessionStorage.clear()
        return this.$message.error('您没有权限，请重新登陆！')
      }
      if (res.code == 10404) return this.$message.error('退货失败，该销售单商品不存在！')
      if (res.code == 10412) return this.$message.error('退货失败，退货数量超出购买数量！')
      if (res.code == 10200) {
        this.dialogVisible = true
      }
    },
    //动态加减
    handleChange (value) {
      console.log(value);
    },
    //保证动态刷新
    newPage () {
      let item = []
      this.itemList.forEach(function(value, index) {
        item[index] = value;
      })
      this.itemList = item;
      console.log(this.itemList)
      this.cinItemBarcode = '' //文本框清空
      //保证指针刷新后仍在文本框
      this.$nextTick(() => {
        this.$refs.clickPosition.focus()
      })
    },
    //清空重置
    clearItem(){
      this.itemList=[]
      this.cinSequenceNo=''
      this.cinItemBarcode=''
      this.newPage()
    },
  }
}
</script>

<style lang="less" scoped>
.text {
  font-size: 14px;
}
.item {
  padding: 18px 0;
}
.el-popover {
  height: 200px;
  overflow: auto;
}
</style>
